import React from 'react';
import { SearchBar, Icon, Tabs, Accordion, Card, Badge, Button, ActionSheet } from 'antd-mobile';
import './ExamList.css';
import { getExamStatusHtml, ConvertShortDT, format } from '../../resource/base.js';
import $ from 'jquery';
const listJson = require('../../resource/list.json');
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
  wrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
};
const tabs = [
  { title: '全部' },
  { title: '我的' },
  { title: '未完成' },
  { title: '已完成' },
];

class ListAll extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      listArr: []
    }
  }
  componentDidMount() {
    var that = this;
    let jsonstr = '{"key":"b8879075-517b-4bf3-bec8-645baf73f498","params":{"queryLevel":"1","startExamReqDate":"2020-01-19","endExamReqDate":"2020-01-26","examTWrs":["00001172","00001325","00001446","00001050","00000001","00001065","00001066","00001070","00001073","00001129","00000003","00001220","00001223","00001230","00001246","00001247","00001253","00001254","00001292","00001293","00001301","00001304","00001306","00001311","00001312","00001313","00001314","00001331","00001351","00001361","00001364","00001447","00001467","00001492","00001520","00001523"],"examRWrs":["00001172","00001325","00001446","00001050","00000001","00001065","00001066","00001070","00001073","00001129","00000003","00001220","00001223","00001230","00001246","00001247","00001253","00001254","00001292","00001293","00001301","00001304","00001306","00001311","00001312","00001313","00001314","00001331","00001351","00001361","00001364","00001447","00001467","00001492","00001520","00001523"]}}';
    $.post('http://www.fangsheyun.com:8080/imagecloud/exam/qer_lst',{json:jsonstr},function(data,status){
        if(status == 'success' && data.code == '200'){
          that.setState({
            listArr:data.data.examEntity
          });
        }
    })
  }
  showActionSheet = () => {
    const BUTTONS = ['今天', '昨天', ,'前天','最近7天', '最近一个月', '取消'];
    ActionSheet.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: BUTTONS.length - 1,
      // destructiveButtonIndex: BUTTONS.length - 2,
      // title: 'title',
      // message: 'I am description, description, description',
      maskClosable: true,
      'data-seed': 'logId',
      wrapProps,
    },
    (buttonIndex) => {
      this.setState({ clicked: BUTTONS[buttonIndex] });
    });
  }
  onChange = (key) => {
    console.log(key);
  }
  render() {
    const list = this.state.listArr;
    return (
      <div className="flex-container">
        <div className="search-box">
          <div className="search-left">
            <img src="https://test.fangsheyun.cn/sysmobile/img/icon-time-range.png" alt="" style={{verticalAlign:'middle'}} onClick={this.showActionSheet}></img>
          </div>
          <div className="search-center">
            <SearchBar placeholder="输入关键字" maxLength={8} />
          </div>
          <div className="search-right">
            <img src="https://test.fangsheyun.cn/sysmobile/img/icon-screen-range.png" alt="" style={{verticalAlign:'middle'}}></img>
          </div>
        </div>

        <Tabs tabs={tabs} initialPage={0} animated={true} useOnPan={true}>
          <div className="list-box">
            <ExamList examEntity={list} typeText="全部" />
          </div>
          <div className="list-box">
            <ExamList examEntity={list} typeText="我的" />
          </div>
          <div className="list-box">
            <ExamList examEntity={list} typeText="未完成" />
          </div>
          <div className="list-box">
            <ExamList examEntity={list} typeText="已完成" />
          </div>
        </Tabs>

      </div>
    );
  }
}
class ExamList extends React.Component {
  constructor(props) {
    super(props);
  }
  onChange = (key) => {
    console.log(key);
  }
  render() {
    const typeText = this.props.typeText;
    return (
      <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange} accordion>
        {this.props.examEntity.map((item, i) => {
          let reprotDate;
          if (item.reportDt != null) {
            reprotDate = format(item.reportDt.time);
          } else {
            reprotDate = '未撰写';
          }
          if (typeText == '我的') {
            return (
              <div></div>
            )
          } else if (typeText == '已完成') {
            if (item.rptDownCnt > 0 || item.examStatus > 90 && item.examStatus <= 95) {
              return (
                <Accordion.Panel key={item.examId} header={<div className="clear">
                  <div className="type-circle">{item.examEclass}</div>
                  <div className="person-msg">
                    <div className="person-msg-box">
                      <span className="pName">{item.patName}</span>
                      <span className="pMessage">{item.patSex} {item.examPatAge} {item.examOrgENo}</span>
                    </div>
                    <div>
                      <span className="examMemo">{item.organName}</span>
                    </div>

                  </div>
                  <div className="status-msg">
                    <Badge text={getExamStatusHtml(item.examStatus).text} style={{ marginLeft: 12, padding: '0 3px', backgroundColor: getExamStatusHtml(item.examStatus).color, borderRadius: 2 }} />
                  </div>
                </div>}>
                  <Card full>
                    <Card.Header
                      title={<label className="list-label font14">{item.examTWrName}</label>}
                      extra={
                        <div className="lc_right clear">
                          <div className="lc_l_left">
                            <p><label className="list-label-t font12">检查时间</label></p>
                            <p><label className="list-label-t font13">{ConvertShortDT(item.examReqDate + ' ' + item.examReqTime)}</label></p>
                          </div>
                          <div className="lc_l_right">
                            <p><label className="list-label-t font12">初步报告</label></p>
                            <p><label className="list-label-t font13">{reprotDate}</label></p>
                          </div>
                        </div>
                      }
                    />
                    <Card.Body>
                      <div className="btn-box">
                        <Button type="primary" size="small" inline>上传附件</Button>
                        <Button type="primary" size="small" inline>影像</Button>
                        <Button type="primary" size="small" inline>报告</Button>
                      </div>
                    </Card.Body>
                    <Card.Footer />
                  </Card>
                </Accordion.Panel>
              )
            } else {
              return (
                <div></div>
              )
            }

          }else {
            return (
              <Accordion.Panel key={item.examId} header={<div className="clear">
                <div className="type-circle">{item.examEclass}</div>
                <div className="person-msg">
                  <div className="person-msg-box">
                    <span className="pName">{item.patName}</span>
                    <span className="pMessage">{item.patSex} {item.examPatAge} {item.examOrgENo}</span>
                  </div>
                  <div>
                    <span className="examMemo">{item.organName}</span>
                  </div>

                </div>
                <div className="status-msg">
                  <Badge text={getExamStatusHtml(item.examStatus).text} style={{ marginLeft: 12, padding: '0 3px', backgroundColor: getExamStatusHtml(item.examStatus).color, borderRadius: 2 }} />
                </div>
              </div>}>
                <Card full>
                  <Card.Header
                    title={<label className="list-label font14">{item.examTWrName}</label>}
                    extra={
                      <div className="lc_right clear">
                        <div className="lc_l_left">
                          <p><label className="list-label-t font12">检查时间</label></p>
                          <p><label className="list-label-t font13">{ConvertShortDT(item.examReqDate + ' ' + item.examReqTime)}</label></p>
                        </div>
                        <div className="lc_l_right">
                          <p><label className="list-label-t font12">初步报告</label></p>
                          <p><label className="list-label-t font13">{reprotDate}</label></p>
                        </div>
                      </div>
                    }
                  />
                  <Card.Body>
                    <div className="btn-box">
                      <Button type="primary" size="small" inline>上传附件</Button>
                      <Button type="primary" size="small" inline>影像</Button>
                      <Button type="primary" size="small" inline>报告</Button>
                    </div>
                  </Card.Body>
                  <Card.Footer />
                </Card>
              </Accordion.Panel>
            )
          }

        })}
      </Accordion>
    )
  }
}
export default ListAll;
